{extend name='bus@public/wrap'}
{block name="main"}

    <div class="ibox-title">
        <h5>菜单管理</h5>
        <div class="pull-right mt-2">
            <button class="btn btn-secondary save"><i class="fa fa-save  fa-lg"></i>&nbsp;保存</button>
        </div>
    </div>
    <div class="container-fluid">

        <!-- 数据表格 -->
        <div class="mt-3">
            <div class="row">
                <div class="col-4">
                    <table id="dg1"></table>
                </div>
                <div class="col-4">
                    <table id="dg2"></table>
                </div>
                <div class="col-4" style="display: none">
                    <table id="dg3"></table>
                </div>
            </div>
        </div>
        <input type="hidden" id="menu_button_id" value="">

    </div>

<script>

    $(function () {

        var height = $('body').height();

        // 搜索按钮
        $(".save").on("click", function () {
            var data = $('#dg3').bootstrapTable('getData');
            frame.ajax({
                url:"/admin/develop/menu_button_save",
                type:"post",
                data:{data:data},
            }).then(function (data) {
                frame.show(data);
            });
        });

        //表格
        $('#dg1').bootstrapTable({
            method: 'get',
            height:height-75,
            url: '/admin/develop/menu_lst',
            pagination: false,
            clickToSelect: true,
            singleSelect: true,
            treeShowField: 'title',
            parentIdField: 'pid',
            columns: [
                {field: 'cb', title: 'cb',checkbox:true},
                {field: 'title', title: '名称',formatter:function (value, row, index) {
                        return '<i class="'+row.ico+'" style="width: 18px;display:inline-block;"></i>&nbsp;'+value;
                    }},
            ],
            onLoadSuccess: function(data) {
                $('#dg1').treegrid({
                    treeColumn: 1,
                });
            },
            onCheck:function (row,el) {

                $("#menu_button_id").val(row['id']);
                $("#dg2").bootstrapTable('refresh');
                $('#dg2').bootstrapTable('uncheckAll');

            },

            queryParams:function(data)
            {
               data.from = '菜单管理';
               return data;
            },
        });

        //表格2
        $('#dg2').bootstrapTable({
            method: 'get',
            url: '/admin/develop/menu_button_lst',
            sidePagination: 'server',
            pagination: false,
            pageSize: 20,
            clickToSelect: true,
            singleSelect: false,
            columns: [
                {field: 'cb', title: 'cb',checkbox:true},
                {field: 'name', title: '名称',formatter:function (value, row, index) {
                        return '<i class="'+row.ico+'" style="width: 18px;display:inline-block;"></i>&nbsp;'+value;
                }},
            ],
            onCheck:function (row,el) {
                $("#menu_button_id").val(row['id'])

                var rows = $('#dg1').bootstrapTable('getSelections');
                if(rows.length == 0){
                    return;
                }

                var menu = rows[0]['id'];
                var button = row['id'];

                var data = $('#dg3').bootstrapTable('getData');
                var index = -1;
                for (var i=0;i<data.length;i++){
                    if(data[i]['menu_id'] == menu && data[i]['button_id'] == button){
                        index = i;
                        break;
                    }
                }
                if(index < 0){
                    data.push({'menu_id':menu,'button_id':button});
                }

                $('#dg3').bootstrapTable('load',data);
            },
            onUncheck:function (row,el) {

                var rows = $('#dg1').bootstrapTable('getSelections');
                if(rows.length == 0){
                    return;
                }

                var menu = rows[0]['id'];
                var button = row['id'];

                var data = $('#dg3').bootstrapTable('getData');
                var index = -1;
                for (var i=0;i<data.length;i++){
                    if(data[i]['menu_id'] == menu && data[i]['button_id'] == button){
                        index = i;
                        break;
                    }
                }
                if(index > -1){
                    data.splice(index,1);
                }

                $('#dg3').bootstrapTable('load',data);

            },
            queryParams:function(data)
            {
                data.menu_button_id = $("#menu_button_id").val();
                data.type = '按钮分配';
                return data;
            },
            onLoadSuccess()
            {

                var menu = $("#menu_button_id").val();
                var data2 = $('#dg2').bootstrapTable('getData');
                var data3 = $('#dg3').bootstrapTable('getData');
                for (var i=0;i<data2.length;i++){
                    for (var j=0;j<data3.length;j++){
                        if(data3[j]['menu_id'] == menu && data3[j]['button_id'] == data2[i]['id']){
                            $('#dg2').bootstrapTable('check',i);
                        }
                    }
                }
            },
        });

        //表格3
        $('#dg3').bootstrapTable({
            method: 'get',
            url: '/admin/develop/menu_button_lst3',
            pagination: false,
            columns: [
                {field: 'menu_id', title: 'menu_id'},
                {field: 'button_id', title: 'button_id'},
            ],

        });


    });

</script>

{/block}

